<template>
  <view class="notification-page">
    <!-- 筛选栏 -->
    <view class="filter-section">
      <u-tabs
        :list="filterTabs"
        :current="currentFilter"
        @change="handleFilterChange"
        lineWidth="30"
        lineHeight="3"
        activeStyle="color: #2d8cf0; font-weight: bold;"
        inactiveStyle="color: #606266;"
      ></u-tabs>
    </view>

    <!-- 消息列表 -->
    <view class="notification-list">
      <view
        v-for="notification in notificationList"
        :key="notification.id"
        class="notification-item"
        :class="{ 'unread': !notification.isRead }"
        @click="handleNotificationDetail(notification)"
      >
        <view class="notification-icon">
          <u-icon
            :name="getNotificationIcon(notification.type)"
            :color="getNotificationColor(notification.type)"
            size="20"
          ></u-icon>
        </view>
        
        <view class="notification-content">
          <view class="notification-header">
            <text class="notification-title">{{ notification.title }}</text>
            <text class="notification-time">{{ formatDateTime(notification.createTime) }}</text>
          </view>
          <view class="notification-body">
            <text class="notification-text">{{ notification.content }}</text>
          </view>
          <view class="notification-footer">
            <u-tag
              :text="getTypeText(notification.type)"
              :type="getTypeType(notification.type)"
              size="mini"
            ></u-tag>
            <view class="notification-status">
              <u-tag
                :text="notification.isRead ? '已读' : '未读'"
                :type="notification.isRead ? 'success' : 'warning'"
                size="mini"
              ></u-tag>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="notificationList.length === 0 && !loading" class="empty-state">
      <u-empty
        text="暂无消息通知"
        mode="data"
      ></u-empty>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-state">
      <u-loading-icon mode="spinner"></u-loading-icon>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 浮动发送按钮 -->
    <view class="fab-button" @click="handleSendMessage">
      <u-icon name="plus" color="#fff" size="24"></u-icon>
    </view>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'Notification',
  setup() {
    // 响应式数据
    const loading = ref(false)
    const currentFilter = ref(0)
    const notificationList = ref([])

    // 筛选标签
    const filterTabs = ref([
      { name: '全部' },
      { name: '未读' },
      { name: '系统通知' },
      { name: '工作通知' },
      { name: '紧急通知' }
    ])

    // 获取消息图标
    const getNotificationIcon = (type) => {
      const iconMap = {
        system: 'bell',
        work: 'briefcase',
        urgent: 'alert-circle',
        repair: 'tools',
        other: 'message'
      }
      return iconMap[type] || 'message'
    }

    // 获取消息颜色
    const getNotificationColor = (type) => {
      const colorMap = {
        system: '#2d8cf0',
        work: '#19be6b',
        urgent: '#ff4757',
        repair: '#ff9500',
        other: '#9c26b0'
      }
      return colorMap[type] || '#666'
    }

    // 获取类型文本
    const getTypeText = (type) => {
      const typeMap = {
        system: '系统通知',
        work: '工作通知',
        urgent: '紧急通知',
        repair: '维修通知',
        other: '其他'
      }
      return typeMap[type] || '未知'
    }

    // 获取类型样式
    const getTypeType = (type) => {
      const typeMap = {
        system: 'primary',
        work: 'success',
        urgent: 'error',
        repair: 'warning',
        other: 'info'
      }
      return typeMap[type] || 'default'
    }

    // 格式化日期时间
    const formatDateTime = (dateTime) => {
      if (!dateTime) return ''
      const d = new Date(dateTime)
      const year = d.getFullYear()
      const month = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      const hours = String(d.getHours()).padStart(2, '0')
      const minutes = String(d.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    }

    // 加载消息列表
    const loadNotificationList = async () => {
      try {
        loading.value = true
        // TODO: 调用后端API获取消息列表
        // 模拟数据
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        notificationList.value = [
          {
            id: 1,
            title: '系统维护通知',
            content: '系统将于今晚22:00-24:00进行维护，期间可能影响正常使用',
            type: 'system',
            isRead: false,
            createTime: '2025-01-30 14:30:00'
          },
          {
            id: 2,
            title: '维修工单分配',
            content: '您有一个新的维修工单需要处理，请及时查看',
            type: 'work',
            isRead: true,
            createTime: '2025-01-30 10:15:00'
          },
          {
            id: 3,
            title: '紧急：电梯故障',
            content: 'A栋电梯发生故障，请立即前往现场处理',
            type: 'urgent',
            isRead: false,
            createTime: '2025-01-30 09:45:00'
          },
          {
            id: 4,
            title: '维修进度更新',
            content: 'B栋门锁维修已完成，请确认验收',
            type: 'repair',
            isRead: true,
            createTime: '2025-01-29 16:20:00'
          }
        ]
      } catch (error) {
        console.error('加载消息列表失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'error'
        })
      } finally {
        loading.value = false
      }
    }

    // 筛选变化
    const handleFilterChange = (index) => {
      currentFilter.value = index
      console.log('筛选变化:', filterTabs.value[index].name)
      // TODO: 实现筛选逻辑
      loadNotificationList()
    }

    // 查看消息详情
    const handleNotificationDetail = async (notification) => {
      try {
        // 标记为已读
        if (!notification.isRead) {
          // TODO: 调用后端API标记为已读
          notification.isRead = true
        }
        
        uni.navigateTo({
          url: `/pages/property-work/notification-detail?id=${notification.id}`
        })
      } catch (error) {
        console.error('查看消息详情失败:', error)
        uni.showToast({
          title: '操作失败',
          icon: 'error'
        })
      }
    }

    // 发送消息
    const handleSendMessage = () => {
      uni.navigateTo({
        url: '/pages/property-work/notification-send'
      })
    }

    // 页面加载
    onMounted(() => {
      loadNotificationList()
    })

    return {
      loading,
      currentFilter,
      notificationList,
      filterTabs,
      getNotificationIcon,
      getNotificationColor,
      getTypeText,
      getTypeType,
      formatDateTime,
      handleFilterChange,
      handleNotificationDetail,
      handleSendMessage
    }
  }
}
</script>

<style lang="scss" scoped>
.notification-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100rpx;
}

.filter-section {
  background: #fff;
  padding: 0 30rpx 20rpx;
  border-bottom: 1rpx solid #eee;
}

.notification-list {
  padding: 20rpx 30rpx;
  
  .notification-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &.unread {
      border-left: 6rpx solid #2d8cf0;
      background: #f8f9ff;
    }
    
    .notification-icon {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      flex-shrink: 0;
    }
    
    .notification-content {
      flex: 1;
      
      .notification-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        
        .notification-title {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
          flex: 1;
        }
        
        .notification-time {
          font-size: 24rpx;
          color: #999;
          margin-left: 20rpx;
        }
      }
      
      .notification-body {
        margin-bottom: 15rpx;
        
        .notification-text {
          font-size: 26rpx;
          color: #666;
          line-height: 1.5;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
      
      .notification-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}

.empty-state {
  padding: 100rpx 0;
  text-align: center;
}

.loading-state {
  padding: 100rpx 0;
  text-align: center;
  
  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999;
  }
}

.fab-button {
  position: fixed;
  right: 30rpx;
  bottom: 100rpx;
  width: 100rpx;
  height: 100rpx;
  background: #2d8cf0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(45, 140, 240, 0.3);
  z-index: 999;
}
</style>
